<template>
    <div>
        <p>
            <input type="text" v-model="user.firstname" placeholder="姓">
        </p>
        <p>
            <input type="text" v-model="user.lastname" placeholder="名">
        </p>
        <p>
            <input type="text" v-model='user.fullname'>
        </p>

        <p @click="count++">count:{{ count }}</p>
    </div>
</template>

<script>
// watch 侦听器是否可以实现对引用数据类型的监听?
// watch默认是监听不了引用数据类型的
// watch: 默认不能呢过实现深度监听, 如果需要监听引用数据类型,需要开启深度监听 deep:true
// watch默认不会初始化监听, 需要开启立即监听 immediate: true

// watch 侦听器的两种语法:
// 常规写法:
// watch: {
//     要监听的数据: {
//         handler(newvalue){

//         },
//         // 其他配置项
//         // deep:true
//         // immediacte:true
//         // flush:'post'
//     }
//    要监听的数据2...
// }

// 简写方式
// watch: {
//     要监听的数据(newvalue, oldvalue){

//     },
//    要监听的数据2...
// }


export default {
    data() {
        return {
            user: {
                firstname: '', // 姓
                lastname: '', // 名
                fullname: ''  // 姓名
            },
            count: 100
        }
    },
    watch: {
        // watch 侦听器的简写方式
        // user(newvalue, oldvalue) {
        //     console.log(newvalue, oldvalue);
        // }

        // watch 侦听器的常规写法
        user: {
            handler(newvalue) {
                console.log(newvalue);
                this.user.fullname = newvalue.firstname + newvalue.lastname
            },
            deep: true,  // 开启深度监听模式
            immediate: true // 开启立即监听
        },
        count: {
            handler(newvalue, oldvalue) {
                console.log(newvalue, oldvalue);
            },
            immediate: true

        }
    }
}
</script>
<style scoped></style>